<template>
      <div class="singer">
        <div class="w1200">
          <!-- singer-info -->
          <div
          class="singer-info"
          >
            <div class="singer-img">
               <el-image :src="artists.img1v1Url">
                        <div slot="placeholder" class="image-slot">
                            <i class="iconfont icon-placeholder"></i>
                        </div>
                    </el-image>
            </div>
            <!-- singer-desc -->
            <div class="singer-desc">
               <div class="singer-author">
                      <div class="singer-name">{{artists.name}}</div>
                      <span class="singer-btn"><i class="iconfont icon-home"></i>个人主页</span>
                      <span class="singer-btn"><i class="iconfont icon-collect"></i> 收藏</span>
               </div>
                <div class="info">{{artists.briefDesc}}
            <el-button type="text" @click="dialogVisible">更多>></el-button>
            </div>
            </div>
          </div>
        </div>
        <!-- singer-main -->
      <div class="singer-main">
         <div class="w1200">
           <!-- singer-hd -->
           <div class="singer-hd">
             <em>作品集</em>
             <div class="singer-tab">
               <span :class="[type==='hot'?'active':'']" @click="changeType('hot')">热门作品</span>
               <span :class="[type==='album'?'active':'']" @click="changeType('album')">所有专辑</span>
               <span :class="[type==='mv'?'active':'']" @click="changeType('mv')">相关MV</span>
             </div>
             <div class="singer-oper" v-if="type === 'hot'">
               <span @click="playAllList"  class="singer-btn allPlay" ><i class="iconfont icon-audio-play"></i>播放全部</span>
               <span class="singer-btn addList"><i class="iconfont icon-add"></i>添加到播放列表</span>
               <span class="singer-btn collect"><i class="iconfont icon-collect"></i>收藏热门</span>
             </div>
           </div>
           <!-- singer-list 用于请求其他列表的数据-->
           <div class="singer-list">
              <ablumList :ablumList="allAlbum" v-show="type === 'album'"></ablumList>
              <MvShow
              :width="'20%'"
              v-for="mvItem in hotMvs"
              :key="mvItem.id"
              :mvItem="mvItem"
              v-show="type === 'mv'"
              class="mvShow"
              @toPlay="toPlay"
              />
               <SongList
               :stripe="true"
               :song="hotSongs"
               v-show="type === 'hot'"/>
           </div>
           <!-- pagination -->
           <div class="pagination" v-if="type === 'album'">
              <el-pagination
              background
              @current-change="currentChange"
              layout="prev, pager, next"
              :page-size="limit"
              :total="total">
            </el-pagination>
           </div>
         </div>
      </div>
      <el-dialog
        :title="artists.name"
        :visible.sync="dialogDescVisible"
        :destroy-on-close="true">
        <div class="artist-desc-main">
          <dl class="introduction">
            <dt>艺人介绍</dt>
            <dd>{{artists.briefDesc}}</dd>
          </dl>
          <dl
          class="introduction"
          v-for="(item,index) in descs"
          :key="index">
            <dt>{{item.ti}}</dt>
            <dd>{{item.txt}}</dd>
          </dl>
        </div>
      </el-dialog>
      </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import assents from '../../assets/css/global.css';
import {reqGetArtists,reqGetDesc,reqGetAlbum,reqGetmv,reqGetTop}from '../../api/singer';
import ablumList from '../../components/album-list'
import MvShow from '../../components/MvShow.vue';
import SongList from '../../components/common/SongList';
export default {
  name: 'Singer',
   components: {
        assents,
        ablumList,
        MvShow,
        SongList
    },
    data(){
    return{
        //歌手个人信息
        artists:{},
        //歌手描述
        descs:[],
        hotAlbums:[],
        dialogDescVisible: false,
        //所有专辑
        allAlbum:[],
        //歌手id
        singerId:this.$route.query.id,
        //每页的数量
        limit:12,
        //总数
        total:20,
        //偏移数量 用于分页
        offset:0,
        //热门mv
        hotMvs:[],
        //热门歌曲
        hotSongs:[],
        //默认是热门作品显示
        type:this.$route.query.type || 'hot'
    }
  },
    // 监听属性 类似于data概念
    computed: {
        ...mapGetters(['playList'])
    },
  async mounted(){
    let id = this.$route.query && this.$route.query.id

    const res = await reqGetArtists(id);
    this.artists = res.artist

    const desc = await reqGetDesc(id);
    this.descs = desc.introduction;
    //热门作品
    this.getTop();
    //歌手mv
    this.getMv();
    //所有专辑
    this.getAlbum();
  },
  methods:{
      ...mapMutations({
            setPlayStatus: 'SET_PLAYSTATUS',
            setPlayList: 'SET_PLAYLIST',
           /*  setPlayListTips: 'setPlayListTips', */
            setPlayIndex: 'SET_PLAYINDEX'
        }),
     // 去播放
    toPlay(id) {
      this.$router.push({
        name: "MvPlay",
        query: {
          id,
        },
      });
    },
    //全部播放
      playAllList () {
            this.playAll({list: this.hotSongs})

        },
    //点击更多
   dialogVisible(){
     this.dialogDescVisible = true
   },
   /*  handleClose(){}, */
    //热门作品
    async getTop(){
      const top =await reqGetTop({id:this.singerId});
      this.hotSongs = top.hotSongs.map(item=>{
        //带个人歌手的热门作品的自身数据去公共组件渲染
        return{
          id: String(item.id),
                    name: item.name,
                    mvId: item.mv,
                    singer: item.ar,
                    album: item.al,
                    alia: item.alia,
                    vip: item.fee === 1,
                    license: item.license,
                    duration: this.$utils.formatSongTime(item.dt),
                    url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
                    publishTime: this.$utils.formatMsgTime(item.publishTime)
        }

      });
      //console.log('top',this.hotSongs);
    },
    //所有专辑
    async getAlbum(){
   const album = await reqGetAlbum({ id: this.singerId, limit: this.limit, offset: this.offset
   });
   this.allAlbum = album.hotAlbums;
   //console.log('album',album);
    },
    //歌手mv
    async getMv(){
      const mv = await reqGetmv({ id: this.singerId, limit: 20, offset: this.offset })
      this.hotMvs = mv.mvs;
      //console.log('mv',mv);
    },
    //点击切换热门、专辑、mv
    changeType(type){
      const params = {
        id:this.singerId,
      }
      this.type = type
      switch(this.type){
        case 'hot':
          this.getTop()
          break;
        case 'album':
          this.getAlbum()
          break;
        case 'mv':
          this.getMv()
          break;
      }
      this.$router.push({ path: 'singer', query: params })
      //console.log(params);
    },
    //专辑分页
     currentChange (page) {
            this.offset = (page - 1) * this.limit
            this.getAlbum();
        },
         ...mapActions(['playAll'])
  },
  /*   watch: {
        $route: {
            handler () {
                this.singerId = this.$route.query.id
            },
            deep: true
        },
        singerId (val, oldVal) {
            this.type = this.$route.query.type || 'hot'
            this.getTop()
        }
    }, */
}
</script>

<style lang="less" scoped>
.singer-list {
  display: flex;
  flex-wrap: wrap;

}
.singer{
 background: #f8f8f8;
  .singer-info{
    display: flex;
    padding: 40px 0;
     .singer-img{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    overflow: hidden;
 /*   img{
    width: 100%;
    height: 100%;
    transition: all 0.5s linear;
     &:hover{
       transform: scale(1.1);
     }
   } */
  }
  }
  .singer-desc{
    flex:1;
    padding-left: 50px;
    .singer-author{
      padding-bottom: 16px;
      .singer-btn{
          display: inline-block;
          line-height: 16px;
          align-items: center;
          border-radius: 50px;
          padding: 7px 15px;
          cursor: pointer;
          margin: 5px 0 5px 15px;
          background: #fff;
          color: #333;
      }
      .singer-name{
        display: inline-block;
        font-size: 40px;
        font-weight: 600;
        margin-right: 40px;
        line-height: 40px;
        vertical-align: middle;
      }
    }
    .info{
      line-height: 24px;
      color: #999;
      span{
        cursor: pointer;
      }
    }
  }
.singer-main {
    padding: 50px 0 80px;
    background: #fff;
    .singer-hd{
      display: flex;
      .singer-btn{
         display: inline-block;
         margin: 5px 0 5px 15px;
         line-height: 16px;
         padding: 7px 15px;
         background: #ccc;
         border-radius: 20px;
         cursor: pointer;
         margin: 5px 0 5px 15px;
         background: #fff;
         color: #333;
      }
      .allPlay{
        color: #fff;
        font-size: 14px;
        background: rgb(255, 100, 30);
      }
      .addList,.collect{
        color: #333;
        font-size: 14px;
        background: rgb(240, 240, 240);
      }
      em{
        display: inline-block;
        width: 85px;
        font-size: 28px;
        line-height: 28px;
        font-style: normal;
      }
      .singer-tab{
        flex: 1;
      }
      span{
        display: inline-block;
        font-size: 16px;
        margin: 0 24px;
        color: #666;
        cursor: pointer;
        z-index: 1;
        &.active{
          position: relative;
          &:after{
            position: absolute;
            left: 0;
            bottom: 0;
            content: "";
            height: 6px;
            width: 100%;
            background:#ff641e;
            cursor: pointer;
            z-index: -1;
          }
        }
      }
    }
    .pagination{
      padding: 30px 0;
      text-align: center;
    }
}
.artist-desc-main {
    max-height: 500px;
    overflow-y: auto;
}
.introduction {
  dt{
     position: relative;
    line-height: 14px;
    padding-bottom: 10px;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    &:before{
      content: '';
      display: inline-block;
      width: 4px;
      height: 14px;
      margin-right: 10px;
      vertical-align: top;
      border-radius: 4px;
      background: rgb(255, 100, 30);
    }
  }
  dd{
    padding-bottom: 20px;
    font-size: 12px;
    color: #666;
    padding: 10px 0 20px;
    white-space: pre-line;
    line-height: 25px;
  }
}
.singer-oper{
  span:first-child{
    i{
 color: #fff;
    }
  }
}
}
</style>

